<!DOCTYPE html>
<html>
<head>
    <title>接口文档</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--    <link rel="stylesheet" href="css/bootstrap-table.min.css">-->
    <link rel="stylesheet" href="css/main.css">
    <script src="libs/jquery.min.js"></script>
    <!--    <script src="plugins/layer/layer.js"></script>-->
    <script src="libs/bootstrap.min.js"></script>
    <script src="libs/vue.min.js"></script>
    <!--    <script src="libs/bootstrap-table.min.js"></script>-->
    <!--    <script src="libs/bootstrap-table-zh-CN.min.js"></script>-->
    <style>
        .control-label {
            font-weight: 400;
        }

        .form-control {
            margin-right: 10px;
        }

        .row {
            border-top: none;
            margin: 0;
            padding: 0;
        }

        .col-left {
            margin: 0;
            padding: 0 20px 0 0;
        }

        .col {
            margin: 0;
            padding: 0 0 0 0;
        }

        .description {
            margin: 20px 0;
        }

        .callout::before {
            content: "";
            margin-right: 10px;
            border-left-width: 3px;
            border-left-color: #1b809e;
            border-left-style: solid;
        }

        .label-get {
            background-color: #6bc7a0;
            margin-right: 10px;
        }

        .label-post {
            background-color: #df8d49;
            margin-right: 10px;
        }

        .label-put {
            background-color: #448ff7;
            margin-right: 10px;
        }

        .label-patch {
            background-color: #d84393;
            margin-right: 10px;
        }

        .label-delete {
            background-color: #e76033;
            margin-right: 10px;
        }

        .label-options {
            background-color: #448ff7;
            margin-right: 10px;
        }

        .label-default {
            background-color: #777;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="rrapp">
    <div class="panel panel-default">
        <div class="panel-heading">Swagger项目配置</div>
        <div class="panel-body">
            <form class="form-inline" action="#">
                <div class="form-group">
                    <label for="swaggerUrl" class="control-label">项目地址</label>
                    <input type="text" size="120" class="form-control" v-model="swagger.url" id="swaggerUrl" value=""
                           placeholder="http://127.0.0.1">
                </div>
                <div class="form-group">
                    <a class="btn btn-info" @click="save">保存</a>
                </div>
                <div class="form-group">
                    <a class="btn btn-default" @click="reset">重置</a>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 col-left">
            <ul class="list-group">
                <template v-for="(tag,index) in apiDocs.tags">
                    <a href="#" class="list-group-item" :class="{active:select.tag.index===index}"
                       @click="checkTag(tag.name,index)">
                        <span class="badge"></span>
                        {{tag.name}}
                    </a>
                </template>
            </ul>
        </div>
        <div class="col-md-10 col">
            <div class="panel-group" id="paths">
                <template v-for="(path,index) in select.paths">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#paths"
                                   :href="'#panel-'+index">{{path.title}}</a>
                            </h4>
                        </div>
                        <div :id="'panel-'+index" class="panel-collapse collapse" :class="{in:index==0}">
                            <div class="panel-body">
                                <section>
                                    <span :class="'label label-'+path.method">{{path.method.toUpperCase()}}</span>
                                    <a href="#">{{path.url}}</a>
                                    <p class="description">{{path.title}}</p>
                                </section>
                                <section>
                                    <h4 class="callout">请求参数</h4>
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>类型</th>
                                            <th>位置</th>
                                            <th>必填</th>
                                            <th>默认值</th>
                                            <th>说明</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                    <h6>Body 参数(application/json)</h6>
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li role="presentation" class="active">
                                            <a href="#panel-1-bodyModel" aria-controls="panel-1-bodyModel" role="tab"
                                               data-toggle="tab">数据结构</a></li>
                                        <li role="presentation">
                                            <a href="#panel-1-bodyExample" aria-controls="panel-1-bodyExample"
                                               role="tab"
                                               data-toggle="tab">示例值</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div role="tabpanel" class="tab-pane fade in active" id="panel-1-bodyModel">
                                            <table class="table table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th>名称</th>
                                                    <th>类型</th>
                                                    <th>必填</th>
                                                    <th>默认值</th>
                                                    <th>说明</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td>username</td>
                                                    <td>String</td>
                                                    <td>true</td>
                                                    <td></td>
                                                    <td>账号</td>
                                                </tr>
                                                <tr>
                                                    <td>password</td>
                                                    <td>String</td>
                                                    <td>true</td>
                                                    <td></td>
                                                    <td>密码</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div role="tabpanel" class="tab-pane fade" id="panel-1-bodyExample">
                                            <pre>{"username":"admin", "password":"123456"}</pre>
                                        </div>
                                    </div>
                                </section>
                                <hr>
                                <section>
                                    <h4 class="callout">返回响应</h4>
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>类型</th>
                                            <th>必填</th>
                                            <th>默认值</th>
                                            <th>说明</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>token</td>
                                            <td>String</td>
                                            <td>true</td>
                                            <td></td>
                                            <td>用户访问令牌</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <h4 class="callout">响应示例</h4>
                                    <pre>{"token":"18231823198235142317"}</pre>
                                </section>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <script src="js/swagger.js"></script>
    </div>
</div>
</body>
</html>